
import { useState } from "react"

export default function StateInput(){
	const [firstName,setFirstName] =useState('')
	const [lastName,setLastName]=useState('')
	const [fullName,setFullName]=useState('')
	const [count,setCount] =useState(0)
	
	function getFirstName(e){
		let value =e.target.value; 
		setFirstName(value)
		setFullName(value+' '+lastName)
	}
	
	function getLastName(e){
		let value =e.target.value; 
		setLastName(value)
		setFullName(firstName+' '+value)
	}
	
	function addClick(){
		setCount(count+1)
	}
	
	return(
		<>
		<h3>让我们为你登记</h3>
		
		<div className="showInput">
			<label >
				名:{' '}<input value={firstName}  onChange={getFirstName} placeholder="输入名" />
			</label>
		</div>
		
		<div className="showInput">
			<label  >
				姓:{' '}<input value={lastName} placeholder="输入姓" onChange={getLastName} />
			</label>
		</div>
		
		<div>你的票据将签发给：{fullName}</div>
		<div><button onClick={addClick}>点击我{count || ''}</button></div>
		</>
	)
}